/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../../styles' as styles;
@use '../../styles/tokens' as awsui;
@use './motion';

@use '../chart-series-marker/styles' as marker;

$font-weight-bold: awsui.$font-weight-heading-s;

.root {
  @include styles.styles-reset;
}

.value {
  text-align: end;
  margin-inline-start: awsui.$space-xxl;
  &.expandable {
    font-weight: $font-weight-bold;
  }
}

.list-item,
.inner-list-item {
  list-style: none;
}

.inner-list-item,
.list-item > .key-value-pair,
.list-item > .expandable-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  inline-size: 100%;
  > .key {
    @include styles.text-wrapping;
    display: inline-flex;
    color: awsui.$color-text-group-label;
  }
}

.sub-items {
  &:not(.expandable) {
    padding-inline-start: calc(marker.$marker-width + marker.$marker-margin-right);
  }
  &.expandable {
    padding-inline-start: 0;
    > .inner-list-item > .value {
      white-space: nowrap;
    }
  }
}

.list {
  display: flex;
  margin-block: 0;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 0;
  list-style: none;
  flex-direction: column;

  > .list-item {
    > .key-value-pair > .key {
      align-items: flex-start;
    }

    &.dimmed {
      opacity: 0.35;
    }
  }
}

.list:not(.compact) > .list-item:not(:first-child),
.inner-list-item {
  margin-block-start: awsui.$space-scaled-xxs;
}

.list-item.with-sub-items:not(.expandable) > .key-value-pair {
  > .key,
  > .value {
    font-weight: $font-weight-bold;
  }
}

.full-width {
  inline-size: 100%;
}
